<template>
	<view class="mar-top10">
		<view class="user-item a-center center j-sp border-b-1-96">
			<view class="font-28 black40-zt">头像</view>
			<view class="userPic border-r overflow-hidden position-relative">
				<image :src="userInfo.headimg" mode="widthFix" lazy-load></image>
				<button class="position-absolute p-bottom p-left p-right p-top" open-type="chooseAvatar" @chooseavatar="chooseavatar"></button>
			</view>
			
		</view>
		<view class="user-item a-center center j-sp border-b-1-96">
			<view class="font-28 black40-zt">昵称</view>
			<view class="userInput position-relative">
				<input type="nickname" :value="userInfo.nickname" @blur="onNickName" class="font-24 black50-zt"/>
			</view>
		</view>
		<view class="user-item a-center center j-sp border-b-1-96">
			<view class="font-28 black40-zt">手机号</view>
			<view class="userInput position-relative">
				<button @getphonenumber="getPhoneNumber" open-type="getPhoneNumber" style="background-color: #ffffff;" size="mini">
					<text class="black40-zt" v-if="userInfo.tel==''">绑定手机号</text>
					<text v-else>{{userInfo.tel}}</text>
				</button>
			</view>
		</view>
		<view class="user-item a-center center j-sp border-b-1-96">
			<view class="font-28 black40-zt">性别</view>
			<view class="userInput position-relative a-center" @tap="getUser('sex')">
				<view class="userInput font-28 black40-zt mar-right20">{{userInfo.sex|sexData}}</view>
				<view class="icon-jinru"></view>
			</view>
		</view>
		<view class="user-item a-center center j-sp border-b-1-96">
			<view class="font-28 black40-zt">生日</view>
			<view class="userInput position-relative a-center">
				<uni-datetime-picker v-model="userInfo.birthday" @change="dateTime" type="date" :border="false" style="width: 400rpx;height: 110rpx;line-height: 110rpx;text-align: right;font-size: 24rpx;">{{userInfo.birthday|birthdayData}}</uni-datetime-picker>
				<view class="icon-jinru"></view>
			</view>
		</view>
		<view class="user-item a-center center j-sp border-b-1-96">
			<view class="font-28 black40-zt">会员身份</view>
			<view class="userInput position-relative a-center" @tap="getUser('Level')">
				<view class="userInput font-28 black40-zt mar-right20">{{userInfo.levelid|levelData}}</view>
				<view class="icon-jinru"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniDatetimePicker from "@/pagesC/pages_com/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	export default {
		components:{
			uniDatetimePicker
		},
		data() {
			return {
				user_id:0,
				invite_code:"",
				userInfo:{
					nickname:'',
					tel:'',
					id:undefined,
					headimg:'',
					sex:''
				}
			}
		},
		onLoad() {
			this.user_id=parseInt(this.$user.state.userId)
			this.invite_code=this.$user.state.invite_code
			this.getUserInfo()
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		filters:{
			sexData(data){
				if(data=='0'){
					return "未知的"
				}else if(data=='1'){
					return "男"
				}else if(data=='2'){
					return "女"
				}
			},
			levelData(data){
				if(data==1){
					return "普通会员"
				}else if(data==2){
					return "爱心会员"
				}else if(data==3){
					return "军人会员"
				}else if(data==4){
					return "教师会员"
				}else if(data==5){
					return "医护会员"
				}
			},
			birthdayData(data){
				if(data==''){
					return "选择生日"
				}else{
					return data
				}
			}
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意家政",
				path: '/pages/index/index?rid='+this.invite_code,
				desc:"头像、墙纸、壁纸、背景免费获取！",
				imageUrl:"../../static/basicprofile.jpeg"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意家政',
				type: 0,
				summary: "头像、墙纸、壁纸、背景免费获取！",
			}
		},
		methods: {
			//获取头像
			chooseavatar(res){
				uni.uploadFile({
					url:this.$user.maiApiUrl+"/admin/aliyun/upload",
					filePath:res.detail.avatarUrl,
					name:"file",
					formData:{
						user:"test"
					},
					success: (fileData) => {
						const resData=JSON.parse(fileData.data)
						if(resData.code==0){
							this.avatarUrl=resData.data.file
							let data={
								type:1,
								user_id:this.user_id,
								user_pic:resData.data.file,
								user_name:this.userInfo.nickname,
								phone:this.userInfo.tel,
								sex:this.userInfo.sex,
								birthday:this.userInfo.birthday
							}
							this.setUserInfo(data)
						}else{
							uni.showToast({
								icon:"none",
								title:"头像更新失败！"
							})
						}
						
					}
				})
				
			},
			//获取手机号
			async getPhoneNumber(e){
				console.log(e)
				const  one={
					app_id:1,
					code:e.detail.code
				}
				await this.$api.GetWXPhone(one).then(res=>{
					let data={
						type:1,
						user_id:this.user_id,
						user_pic:this.userInfo.headimg,
						user_name:this.userInfo.nickname,
						phone:res.data.phoneNumber,
						sex:this.userInfo.sex,
						birthday:this.userInfo.birthday
					}
					this.setUserInfo(data)
				})
			},
			//设置用户信息
			async setUserInfo(data){
				await this.$api.setUserInfo(data).then(res=>{
					if(res.code==0){
						uni.showToast({
							icon:"success",
							title:"设置成功！"
						})
						this.getUserInfo()
					}
				})
			},
			//获取用户信息
			async getUserInfo(){
				if(this.$user.state.token==""){
					return
				}else{
					const one={
						mid:this.user_id,
						aid:1
					}
					await this.$api.UserInfo(one).then(res=>{
						this.userInfo=res.data
					})
				}
			},
			//打开修改
			getUser(type){
				switch (type){
					case "sex":
						uni.showActionSheet({
							itemList: ['男', '女'],
							success:  (res)=> {
								const sex=res.tapIndex + 1
								this.userInfo.sex=sex.toString()
								let data={
									type:1,
									user_id:this.user_id,
									user_pic:this.userInfo.headimg,
									user_name:this.userInfo.nickname,
									phone:this.userInfo.tel,
									sex:this.userInfo.sex,
									birthday:this.userInfo.birthday,
									levelid:this.userInfo.levelid
								}
								this.setUserInfo(data)
							}
						})
					break;
					case "Level":
						uni.showActionSheet({
							itemList: ['普通会员', '爱心会员', '军人会员', '教师会员', '医护会员'],
							success:  (res)=> {
								const sex=res.tapIndex + 1
								this.userInfo.levelid=sex
								let data={
									type:1,
									user_id:this.user_id,
									user_pic:this.userInfo.headimg,
									user_name:this.userInfo.nickname,
									phone:this.userInfo.tel,
									sex:this.userInfo.sex,
									birthday:this.userInfo.birthday,
									levelid:this.userInfo.levelid
								}
								this.setUserInfo(data)
							}
						})
					break;
				}
			},
			//监听日期选择
			dateTime(e){
				this.userInfo.birthday=e
				let data={
					type:1,
					user_id:this.user_id,
					user_pic:this.userInfo.headimg,
					user_name:this.userInfo.nickname,
					phone:this.userInfo.tel,
					sex:this.userInfo.sex,
					birthday:this.userInfo.birthday
				}
				this.setUserInfo(data)
			},
			//获取用户昵称
			onNickName(e){
				console.log(e.detail.value)
				let data={
					type:1,
					user_id:this.user_id,
					user_pic:this.userInfo.headimg,
					user_name:e.detail.value,
					phone:this.userInfo.tel,
					sex:this.userInfo.sex,
					birthday:this.userInfo.birthday
				}
				this.setUserInfo(data)
			}
		}
	}
</script>

<style lang="scss">
image{
	width: 100%;
	display: block;
}
.user-item{
	height: 95rpx;
	.userInput input{
		text-align: right;
	}
}
.userButton{
	button{
		
	}
}
.userPic{
	width: 65rpx;
	height: 65rpx;
	button{
		opacity: 0;
	}
}
button::after{border: initial;}
.button::after{ border: none; }
</style>
